<template>
	<view>
		<nav-bar :title="status==0?'成为商家':status==1?'商家信息':'审核失败'"></nav-bar>
		<!-- <scroll-view class="form-content">
			<view class="form-items row-between">
				<view class="label">
					店铺名称
				</view>
				<input type="text" style="text-align: right;" placeholder="请输入店铺名称" v-model="storeName" />
			</view>
			<view class="form-items row-between">
				<view class="label">
					详细地址
				</view>
				<input type="text" style="text-align: right;" v-model="addressInfo.address" placeholder="请输入详细地址"/>
			</view>
			<view class="form-items row-between">
				<view class="label">
					在售类别
				</view>
				<input type="text" style="text-align: right;" placeholder="请输入在售类别" v-model="saleType" />
			</view>
			<view class="form-items row-between">
				<view class="label">
					联系方式
				</view>
				<input type="number" style="text-align: right;" placeholder="请输入手机号" v-model="phoneNumber" />
			</view>
			<view class="form-items row-between">
				<view class="label">
					联系人
				</view>
				<input type="text" style="text-align: right;" placeholder="请输入商户姓名" v-model="receiverName" />
			</view>
			<view class="form-items row-between">
				<view class="label">
					备注
				</view>
				<input type="text" style="text-align: right;" placeholder="请输入备注" v-model="remark" />
			</view>
			<view class="form-items row-between picture">
				<view class="label">
					店铺图片
				</view>
				<view style="width: 30%;padding: 10upx 0;">
					<uni-file-picker v-model="storeImgs" :limit="1"
						:imageStyles="imageStyles" 
						@select="uploadSelectStoreId($event)">
						<uni-icons type="camera-filled" size="30" color="#999999"></uni-icons>
						<view class="desc">点击上传</view>
					</uni-file-picker>
				</view>
			</view>
			<view class="form-items row-between picture">
				<view class="label">
					营业执照照片
				</view>
				<view style="width: 30%;padding: 10upx 0;">
					<uni-file-picker v-model="businessImgs" :limit="1"
						:imageStyles="imageStyles" 
						@select="uploadSelectBusinessImg($event)">
						<uni-icons type="camera-filled" size="30" color="#999999"></uni-icons>
						<view class="desc">点击上传</view>
					</uni-file-picker>
				</view>
			</view>
			<view class="form-items row-between">
				<view class="label">
					设为默认地址
				</view>
				<u-switch v-model="isdefault" activeColor="#0b3f35"></u-switch>
			</view>
		</scroll-view> -->
		<scroll-view :style="{'height': `calc(${scrollHeight} - ${status!=1?120:0}rpx)`}">
			<uni-forms ref="form" :rules="rules" v-if="status!=1">
				<uni-forms-item label="店铺名称" class="form-items" required name="">
					<input type="text" style="text-align: right;" placeholder="请输入店铺名称" v-model="storeName" />
				</uni-forms-item>
				<uni-forms-item label="详细地址" class="form-items" required name="">
					<input type="text" style="text-align: right;" v-model="addressInfo.address" placeholder="请输入详细地址" />
				</uni-forms-item>
				<uni-forms-item label="联系方式" class="form-items" required name="phoneNumber">
					<input type="number" style="text-align: right;" placeholder="请输入手机号" v-model="phoneNumber" />
				</uni-forms-item>
				<uni-forms-item label="联系人" class="form-items" required name="receiverName">
					<input type="text" style="text-align: right;" placeholder="请输入商家姓名" v-model="receiverName" />
				</uni-forms-item>
				<uni-forms-item label="备注" class="form-items" name="">
					<input type="text" style="text-align: right;" placeholder="请输入备注信息" v-model="remark" />
				</uni-forms-item>
				<uni-forms-item label="店铺图片" class="form-items picture" required name="">
					<view style="width: 30%;padding: 10upx 0;">
						<uni-file-picker v-model="storeImgs" :limit="1" :imageStyles="imageStyles"
							@select="uploadSelectStoreId($event)">
							<uni-icons type="camera-filled" size="30" color="#999999"></uni-icons>
							<view class="desc">点击上传</view>
						</uni-file-picker>
					</view>
				</uni-forms-item>
				<uni-forms-item label="营业执照照片" class="form-items picture" required name="">
					<view style="width: 30%;padding: 10upx 0;">
						<uni-file-picker v-model="businessImgs" :limit="1" :imageStyles="imageStyles"
							@select="uploadSelectBusinessImg($event)">
							<uni-icons type="camera-filled" size="30" color="#999999"></uni-icons>
							<view class="desc">点击上传</view>
						</uni-file-picker>
					</view>
				</uni-forms-item>
			</uni-forms>

			<uni-forms ref="form" :rules="rules" v-if="status==1">
				<uni-forms-item label="商家名称" class="form-items" name="">
					<input type="text" style="text-align: right;" placeholder=" " disabled v-model="storeName" />
				</uni-forms-item>
				<uni-forms-item label="详细地址" class="form-items" name="">
					<input type="text" style="text-align: right;" v-model="addressInfo.address" disabled
						placeholder=" " />
				</uni-forms-item>
				<uni-forms-item label="联系方式" class="form-items" name="phoneNumber">
					<input type="number" style="text-align: right;" placeholder=" " disabled v-model="phoneNumber" />
				</uni-forms-item>
				<uni-forms-item label="联系人" class="form-items" name="receiverName">
					<input type="text" style="text-align: right;" placeholder=" " disabled v-model="receiverName" />
				</uni-forms-item>
				<uni-forms-item label="备注" class="form-items" name="">
					<input type="text" style="text-align: right;" placeholder=" " disabled v-model="remark" />
				</uni-forms-item>
				<uni-forms-item label="商家图片" class="form-items picture" name="">
					<view style="width: 30%;padding: 10upx 0;">
						<image style="width: 200rpx; height: 200rpx;" :src="storeImgs[0].url" mode="widthFix"></image>
						<!-- <uni-file-picker v-model="storeImgs" :limit="1" :imageStyles="imageStyles"
						@select="uploadSelectStoreId($event)">
						<uni-icons type="camera-filled" size="30" color="#999999"></uni-icons>
						<view class="desc">点击上传</view>
					</uni-file-picker> -->
					</view>
				</uni-forms-item>
				<uni-forms-item label="营业执照照片" class="form-items picture" name="">
					<view style="width: 30%;padding: 10upx 0;">
						<image style="width: 200rpx; height: 200rpx;" :src="businessImgs[0].url" mode="widthFix">
						</image>
						<!-- 	<uni-file-picker v-model="businessImgs" :limit="1" :imageStyles="imageStyles"
						@select="uploadSelectBusinessImg($event)">
						<uni-icons type="camera-filled" size="30" color="#999999"></uni-icons>
						<view class="desc">点击上传</view>
					</uni-file-picker> -->
					</view>
				</uni-forms-item>
			</uni-forms>
		</scroll-view>
		<view class="form_bottom_btn" style="background-color: #f2f2f2 !important;" v-if="status!=1">
			<view class="btn-box">
				<view class="confirm" @click="clickAddAddress">{{status==2?'重新提交':'提交'}}</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		baseUrl,
		baseImgUrl,
		baseIconUrl
	} from '@/config'
	import {
		getMiniprogramToken
	} from "@/utils/auth"
	export default {
		name: 'becomeMerchant',
		data() {
			return {
				scrollHeight: '',
				baseUrl,
				id: '',
				receiverName: '',
				phoneNumber: '',
				storeName: '',
				saleType: '',
				remark: '',
				baseImgUrl,
				baseIconUrl,
				full_address: '',
				address: '',
				storeImg: '',
				storeImgs: [],
				businessImg: '',
				businessImgs: [],
				isdefault: false,
				addressConfig: [],
				addressForm: {},
				addressInfo: {},
				rules: {
					receiverName: {
						rules: [{
							required: true,
						}, ]
					},
					phoneNumber: {
						rules: [{
							required: true,
						}]
					},
				},
				imageStyles: {
					width: 100,
					height: 100,
					border: {
						color: "#D8DCE5",
						width: '2rpx',
						style: 'dashed',
						radius: '16rpx'
					}
				},
				isDefault: 1,
				status: 0,
				idEdit: '',
			}
		},
		async onLoad(options) {
			this.scrollHeight = this.$store.getters.heightData.noTabMainHeight + 'px'
			if (options.status) {
				this.status = options.status
			}
			let res = await this.$GET(`/fx/join/toApply?type=${4}`)
			this.storeName = res.data.storeName
			this.addressInfo.address = res.data.address
			this.phoneNumber = res.data.phone
			this.receiverName = res.data.name
			this.remark = res.data.remark
			this.storeImg = res.data.img
			this.businessImg = res.data.licenseImg
			this.idEdit = res.data.id
			this.storeImgs = []
			this.businessImgs = []
			if (res.data.img !== null) {
				this.storeImgs.push({
					url: this.baseUrl + res.data.img
				})
			}
			if (res.data.licenseImg !== null) {
				this.businessImgs.push({
					url: this.baseUrl + res.data.licenseImg
				})
			}
			// if (options.item) {
			// 	const {
			// 		latitude,
			// 		longitude,
			// 		phoneNumber,
			// 		receiverName,
			// 		address,
			// 		id,
			// 		isDefault
			// 	} = JSON.parse(options.item)
			// 	this.addressInfo.latitude = latitude
			// 	this.addressInfo.longitude = longitude
			// 	this.addressInfo.address = address
			// 	this.phoneNumber = phoneNumber
			// 	this.receiverName = receiverName
			// 	this.id = id
			// 	this.isDefault = isDefault
			// 	this.isdefault = isDefault == 0 ? true : false
			// }
			// this.addressConfig = uni.$u.deepClone(ADDRESS_FORM)
		},
		onReady() {

		},
		watch: {
			isdefault: {
				handler(newVal, oldVal) {
					if (newVal) {
						this.isDefault = 0
					} else {
						this.isDefault = 1
					}
				},
				deep: true,
			}
		},
		methods: {
			async uploadSelectStoreId(e) {
				const tempFilePaths = e.tempFilePaths
				const tempFiles = e.tempFiles[0]
				uni.uploadFile({
					url: this.baseUrl + '/common/upload',
					// H5上传
					// file: tempFilePaths,
					// 微信小程序上传
					filePath: tempFilePaths[0],
					name: 'file',
					header: {
						"Authorization": 'Bearer ' + getMiniprogramToken()
					},
					// 成功函数
					success: (res) => {
						// 取到文档服务器的值
						let uploadData = JSON.parse(res.data)
						console.log('上传成功的图片', uploadData)
						this.storeImg = `${uploadData.fileName}`
					},
					// 失败提示用户重新上传
					fail: error => {
						console.log('失败', error)
					}
				})
			},
			async uploadSelectBusinessImg(e) {
				const tempFilePaths = e.tempFilePaths
				const tempFiles = e.tempFiles[0]
				uni.uploadFile({
					url: this.baseUrl + '/common/upload',
					// H5上传
					// file: tempFilePaths,
					// 微信小程序上传
					filePath: tempFilePaths[0],
					name: 'file',
					header: {
						"Authorization": 'Bearer ' + getMiniprogramToken()
					},
					// 成功函数
					success: (res) => {
						// 取到文档服务器的值
						let uploadData = JSON.parse(res.data)
						console.log('上传成功的图片', uploadData)
						this.businessImg = `${uploadData.fileName}`
					},
					// 失败提示用户重新上传
					fail: error => {
						console.log('失败', error)
					}
				})
			},
			toMap() {
				uni.chooseLocation({
					success: res => {
						if (!res.name || !res.address || !res.latitude || !res.longitude) return
						this.addressInfo = {
							...res
						}

					}
				})
			},
			async clickAddAddress() {
				const data = {
					name: this.receiverName,
					storeName: this.storeName,
					phone: this.phoneNumber,
					address: this.addressInfo.address,
					remark: this.remark,
					saleType: this.saleType,
					img: this.storeImg,
					licenseImg: this.businessImg,
					roleType: 4,
					id: this.idEdit
				}
				if (this.storeName == '' || this.storeName == null) {
					uni.showToast({
						icon: 'none',
						title: '店铺名称不能为空'
					})
					return
				} else if (this.addressInfo.address == '' || this.addressInfo.address == null) {
					uni.showToast({
						icon: 'none',
						title: '详细地址不能为空'
					})
					return
				} else if (this.receiverName == '' || this.receiverName == null) {
					uni.showToast({
						icon: 'none',
						title: '商户姓名不能为空'
					})
					return
				} else if (this.phoneNumber == '' || !this.$utils.handlePhone(this.phoneNumber)) {
					uni.showToast({
						icon: 'none',
						title: '手机号格式不正确'
					})
					return
				} else if (this.storeImg == '' || this.storeImg == null) {
					uni.showToast({
						icon: 'none',
						title: '请上传店铺图片'
					})
					return
				} else if (this.businessImg == '' || this.businessImg == null) {
					uni.showToast({
						icon: 'none',
						title: '请上传营业执照图片'
					})
					return
				} else {
					if (this.status == 2) {
						const res = await this.$PUT('/fx/join', data)
						console.log(res)
						if (res.code == 200) {
							setTimeout(() => {
								uni.showToast({
									icon: 'success',
									title: '提交成功',
									duration: 2000
								})
							}, 500)
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/index'
								})
							}, 2000)
						} else {
							console.log('失败')
						}
					} else {
						const res = await this.$POST('/fx/join', data)
						console.log(res)
						if (res.code == 200) {
							setTimeout(() => {
								uni.showToast({
									icon: 'success',
									title: '提交成功',
									duration: 2000
								})
							}, 500)
							setTimeout(() => {
								uni.switchTab({
									url: '/pages/index'
								})
							}, 2000)
						} else {
							console.log('失败')
						}
					}
				}
			},

		}
	}
</script>
<style lang="scss" scoped>
	.area-icon {
		width: 40rpx;
		height: 40rpx;
		margin-left: 20rpx;
	}

	.form-content {
		width: 100%;
		padding: 20upx;

		.form-items {
			width: 100%;
			min-height: 100upx;
			border-bottom: 1upx solid #ced9d7;
		}

		.picture {
			display: flex;
			flex-direction: column;
			align-items: flex-start;
			padding: 16upx 0;

			.label {
				margin-bottom: 16upx;
			}
		}
	}

	.label {
		width: 200upx;
		font-size: 30upx;
		font-weight: 600;
	}
</style>
<style lang="scss">
	.uni-forms {
		padding: 20upx;
	}

	.uni-forms-item {
		min-height: 100upx;
		align-items: center;
		margin: 0 !important;
		border-bottom: 1upx solid #ced9d7;

		&:nth-last-child(-n+2) {
			display: flex;
			flex-direction: column !important;
			align-items: flex-start !important;
			padding: 16upx 0;

			.uni-forms-item__content {
				margin-top: 16upx;
				width: 100%;
			}
		}
	}

	.uni-forms-item__content {
		input {
			display: block;
			height: 100%;
		}
	}

	.uni-forms-item__label {
		height: 100% !important;
		width: 240upx !important;
		font-size: 30upx !important;
		font-weight: 600;
		color: black !important;
	}

	.is-required {
		position: absolute;
		left: -12upx;
	}
</style>